/* eslint-disable no-unneeded-ternary */
/* eslint-disable react/jsx-closing-tag-location */
/* eslint-disable no-else-return */
/* eslint-disable no-param-reassign */
/* eslint-disable eqeqeq */
import React, { PureComponent } from 'react';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, Checkbox, Tooltip, Select, Input } from 'antd';
import { connect } from 'dva';
import DictCode from './DictCode';
import { uniqueArray } from '@/utils/utils';

const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
@connect(({ publicdata: { proObjList, probTypeList } }) => ({
  proObjList,
  probTypeList,
}))
@Form.create()
class ProModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchProType',
      payload: {},
    });
    dispatch({
      type: 'publicdata/fetchAlertList',
      payload: ['ALRT_OBJ'],
    });
    dispatch({
      type: 'publicdata/fetchProObjList',
      payload: ['BIZ_INS_TYPE', 'BIZ_ACCU_TYPE'],
    });
  }

  handleCancle = () => {
    const { form, onCancel } = this.props;
    // this.props.onCancel && this.props.onCancel();
    if (onCancel) {
      onCancel();
    }
    form.resetFields();
  };

  // uniqueArray = (array, key) => {
  //   var result = [array[0]];
  //   for (var i = 1; i < array.length; i++) {
  //     var item = array[i];
  //     var repeat = false;
  //     for (var j = 0; j < result.length; j++) {
  //       if (item[key] == result[j][key]) {
  //         repeat = true;
  //         break;
  //       }
  //     }
  //     if (!repeat) {
  //       result.push(item);
  //     }
  //   }
  //   return result;
  // };
  // 处理姓名的文字显示
  handleContent = paramList => {
    // console.log(nameList);
    // let nameList = nameList.filter(item=>item.empName)
    const tempArr = [];
    const tempArr2 = [];
    let nameContent = '';
    let nameTitle = '';
    // 处理重名
    // nameList.map();
    const nameList = uniqueArray(paramList, 'empName');
    nameList.map(value => {
      tempArr.push(value.empName);
      tempArr2.push(value.empName);
      return true;
    });

    nameTitle = tempArr2.join('、');
    if (tempArr.length >= 3) {
      const str1 = tempArr.filter((item, index) => index <= 2).join('、');
      nameContent = `${str1}等${tempArr.length}人`;
    } else {
      nameContent = tempArr.join('、');
    }
    return (
      <Tooltip placement="top" title={<div>{nameTitle}</div>}>
        {nameContent}
      </Tooltip>
    );
  };
  //

  getProType = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchProType',
      payload: {},
    });
  };

  handleOk = () => {
    const { form, onOk } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onOk(values);
      }
    });
  };

  handlePro = (proObjList, proStatus, proObjData) => {
    if (proStatus && proStatus.length) {
      // proObjList && proObjList.forEach(item => {
      //   proStatus.forEach(status => {
      //     if(item.value == status.ass) {
      //       item.execState = status.execState
      //       item.probFlag = status.probFlag
      //     }
      //   })
      // })
      // proObjList.forEach(item => {
      //   const tempItem = item;
      //   proStatus.forEach(status => {
      //     if(status.ass != 1) {

      //     }
      //     if (Number(item.value) === Number(status.ass)) {
      //       tempItem.execState = status.execState;
      //       tempItem.probFlag = status.probFlag;
      //     }
      //   });
      // });
      if (proObjData && proObjData.length) {
        proObjData.forEach(data => {
          proStatus.forEach(status => {
            if (Number(data.value) === Number(status.ass)) {
              data.execState = status.execState;
              data.probFlag = status.probFlag;
            }
            if (data.value == 1) {
              if (status.ass != 2) {
                data.execState = status.execState;
                data.probFlag = status.probFlag;
              }
            }
          });
        });
      } else {
        proObjList.forEach(item => {
          const tempItem = item;
          proStatus.forEach(status => {
            if (Number(item.value) === Number(status.ass)) {
              tempItem.execState = status.execState;
              tempItem.probFlag = status.probFlag;
            }
          });
        });
      }
    }
  };

  renderStatus = (proObjData, proObjList) => {
    if (proObjData && proObjData.length) {
      return (
        <Checkbox.Group style={{ width: '100%' }}>
          <Row>
            {proObjData && proObjData
              ? proObjData.map((item, i) => {
                  const index = i;
                  if (Number(item.execState) === 2) {
                    return (
                      <Col span={8} key={index}>
                        <Checkbox value={item.value} disabled checked>
                          {item.label}
                        </Checkbox>
                      </Col>
                    );
                  }
                  if (Number(item.probFlag) === 1) {
                    return (
                      <Col span={8} key={index}>
                        <ExclamationCircleOutlined style={{ fontSize: 16, color: '#f00', marginRight: 5 }} />
                        {item.label}
                      </Col>
                    );
                  }
                  return (
                    <Col span={8} key={index}>
                      <Checkbox value={item.value}>{item.label}</Checkbox>
                    </Col>
                  );
                })
              : null}
          </Row>
        </Checkbox.Group>
      );
    } else {
      return (
        <Checkbox.Group style={{ width: '100%' }}>
          <Row>
            {proObjList && proObjList
              ? proObjList.map((item, i) => {
                  const index = i;
                  if (Number(item.execState) === 2) {
                    return (
                      <Col span={8} key={index}>
                        <Checkbox value={item.value} disabled checked>
                          {item.label}
                        </Checkbox>
                      </Col>
                    );
                  }
                  if (Number(item.probFlag) === 1) {
                    return (
                      <Col span={8} key={index}>
                        <ExclamationCircleOutlined style={{ fontSize: 16, color: '#f00', marginRight: 5 }} />
                        {item.label}
                      </Col>
                    );
                  }
                  return (
                    <Col span={8} key={index}>
                      <Checkbox value={item.value}>{item.label}</Checkbox>
                    </Col>
                  );
                })
              : null}
          </Row>
        </Checkbox.Group>
      );
    }
  };

  probTypeChange = val => {
    const { form, probTypeList } = this.props;
    const result = probTypeList.filter(item => item.probTypeId === val)[0];

    form.setFieldsValue({
      probTypeDesc: result && result.probTypeName,
    });
  };

  render() {
    // const sendLoading = false;
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 16 } },
    };
    const {
      form: { getFieldDecorator },
      visible,
    } = this.props;
    const {
      selectedRows,
      proObjList,
      isAlertObj,
      isProObj,
      probTypeList,
      proStatus,
      proObjData,
      isProType = true,
      confirmLoading,
    } = this.props;
    if (proStatus && proStatus.length) {
      this.handlePro(proObjList, proStatus, proObjData);
    }
    // if (!sendLoading) {
    return (
      <Modal
        title="标记问题人员"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancle}
        destroyOnClose
        confirmLoading={confirmLoading}
      >
        <div>
          <Row>
            <Col>
              <FormItem {...formItemLayout} label="姓名">
                <Col>{this.handleContent(selectedRows)}</Col>
              </FormItem>
            </Col>
          </Row>
          {isAlertObj ? (
            <Row>
              <Col>
                <FormItem {...formItemLayout} label="提醒对象">
                  {getFieldDecorator('alrtObjs', {
                    rules: [{ required: true, message: '请选择提醒对象' }],
                  })(<DictCode inputType="2" dictType="ALRT_OBJ" />)}
                </FormItem>
              </Col>
            </Row>
          ) : null}
          {isProObj ? (
            <Row>
              <Col>
                <FormItem {...formItemLayout} label="问题对象">
                  {/* {getFieldDecorator('subBusiTypes', {
                      rules: [{ required: true, message: '请选择问题对象' }],
                    })(<CheckboxGroup options={proObjList} />)} */}
                  {getFieldDecorator('subBusiTypes', {
                    rules: [{ required: true, message: '请选择问题对象' }],
                  })(
                    proStatus ? (
                      this.renderStatus(proObjData, proObjList)
                    ) : (
                      <CheckboxGroup options={proObjData ? proObjData : proObjList} />
                    )
                  )}
                </FormItem>
              </Col>
            </Row>
          ) : null}
          <Row>
            {/* <Col>
                <FormItem {...formItemLayout} label="问题人员类型">
                  {getFieldDecorator('probTypeId', {
                    rules: [{ required: true, message: '请选择问题类型' }],
                  })(<DictCode dictType="INS_SERVICE_TYPE" style={{ width: '100%' }} />)}
                </FormItem>
              </Col> */}
            {isProType ? (
              <Col>
                <FormItem {...formItemLayout} label="问题人员类型">
                  {getFieldDecorator('probTypeId', {
                    rules: [{ required: true, message: '请选择问题人员类型' }],
                  })(
                    <Select
                      style={{ width: '100%' }}
                      showSearch
                      allowClear
                      filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                      optionFilterProp="children"
                      onChange={this.probTypeChange}
                    >
                      {probTypeList.map(value => (
                        <Option key={value.probTypeId}>{value.probTypeName}</Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
            ) : null}
          </Row>
          <Row>
            <Col>
              <FormItem {...formItemLayout} label="问题说明">
                {getFieldDecorator('probTypeDesc', {
                  rules: [{ required: true, message: '请填写问题说明' }],
                })(
                  <TextArea
                    placeholder="请输入问题说明"
                    autosize={{ minRows: 3, maxRows: 6 }}
                    maxLength="100"
                  />
                )}
              </FormItem>
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}
// }

export default ProModal;
